<template>
    <el-main>

        <el-tabs v-model="activeName" style="margin-left: 10px">
            <el-tab-pane label="物料信息" name="first">
                <!-- 添加一个div元素，设置其高度为20px，背景颜色为绿色，文本居中对齐，内容为“结果” -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left;border-radius: 0px">
                    原料信息
                </div>
                <!-- 数据表格 -->
                <el-table :data="tableData" ref="myTable1" stripe style="width: 100%; border-radius: 0px; " border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '0px' }" :row-style="{ height: '0px' }"
                    :cell-style="{ padding: '2px' }">
                    <!-- 添加一个序号列，使用type="index" -->
                    <el-table-column type="index" label="序号" width="70px" label-class-name="bold-header" fixed="left" />
                    <el-table-column prop="iconoreName" label="原料名称" width="150px" label-class-name="bold-header"
                        fixed="left" />
                    <!-- prop:填写数据的属性名称 -->
                    <!-- 配比，上下限 -->
                    <el-table-column prop="proportion" label="配比" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <!-- style="height:3px; padding: 0" -->
                            <el-input v-model="scope.row.proportion"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="min" label="下限" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.min"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="max" label="上限" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.max"></el-input>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column type="html" prop="tfe" label="TFe" label-class-name="bold-header" /> -->

                    <!-- <el-table-column prop="min" label="下限" label-class-name="bold-header" /> -->
                    <!-- <el-table-column prop="max" label="上限" label-class-name="bold-header" /> -->
                    <el-table-column prop="tfe" label="TFe" label-class-name="bold-header" />
                    <el-table-column prop="sio2" label="SiO2" label-class-name="bold-header" />
                    <el-table-column prop="ca0" label="CaO" label-class-name="bold-header" />
                    <el-table-column prop="mgo" label="MgO" label-class-name="bold-header" />
                    <el-table-column prop="al2o3" label="Al2O3" label-class-name="bold-header" />
                    <el-table-column prop="p" label="P" label-class-name="bold-header" />
                    <el-table-column prop="s" label="S" label-class-name="bold-header" />
                    <el-table-column prop="mn" label="Mn" label-class-name="bold-header" />
                    <el-table-column prop="h2o" label="H2O" label-class-name="bold-header" />
                    <el-table-column prop="burn" label="Burn" label-class-name="bold-header" />
                    <el-table-column prop="price" label="价格" label-class-name="bold-header" />

                </el-table>



                <!-- 添加一个div元素，设置其高度为20px，背景颜色为绿色，文本居中对齐，内容为“结果” -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left;border-radius: 0px">
                    燃料信息
                </div>
                <!-- 数据表格 -->
                <el-table :data="tableData2" ref="myTable2" stripe style="width: 100%  border-radius: 0px " border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '0px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }" :show-header="false">
                    <!-- <el-table :data="tableData2" ref="myTable2" stripe style="width: 100%  border-radius: 0px " border
                    :row-style="iRowStyle" :cell-style="iCellStyle" :header-row-style="iHeaderRowStyle"
                    :header-cell-style="iHeaderCellStyle" :show-header="false"> -->
                    <!-- 添加一个序号列，使用type="index" -->
                    <el-table-column type="index" label="" width="70px" label-class-name="bold-header" fixed="left" />
                    <el-table-column prop="iconoreName" label="" width="150px" label-class-name="bold-header"
                        fixed="left" />
                    <!-- prop:填写数据的属性名称 -->
                    <!-- 配比，上下限 -->
                    <el-table-column prop="proportion" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.proportion"></el-input>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column prop="proportion" label="配比" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.proportion" style="border:none; height:3px;"></el-input>
                        </template>
                    </el-table-column> -->


                    <el-table-column prop="min" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.min"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="max" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.max"></el-input>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column prop="min" label="下限" label-class-name="bold-header" /> -->
                    <!-- <el-table-column prop="max" label="上限" label-class-name="bold-header" /> -->
                    <el-table-column prop="tfe" label="" label-class-name="bold-header" />
                    <el-table-column prop="sio2" label="" label-class-name="bold-header" />
                    <el-table-column prop="ca0" label="" label-class-name="bold-header" />
                    <el-table-column prop="mgo" label="" label-class-name="bold-header" />
                    <el-table-column prop="al2o3" label="" label-class-name="bold-header" />
                    <el-table-column prop="p" label="" label-class-name="bold-header" />
                    <el-table-column prop="s" label="" label-class-name="bold-header" />
                    <el-table-column prop="mn" label="" label-class-name="bold-header" />
                    <el-table-column prop="h2o" label="" label-class-name="bold-header" />
                    <el-table-column prop="burn" label="" label-class-name="bold-header" />
                    <el-table-column prop="price" label="" label-class-name="bold-header" />

                </el-table>

                <!-- 添加一个div元素，设置其高度为20px，背景颜色为绿色，文本居中对齐，内容为“结果” -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left;border-radius: 0px">
                    溶剂信息
                </div>
                <!-- 数据表格 -->
                <el-table :data="tableData3" ref="myTable3" stripe style="width: 100%  border-radius: 0px" border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }" :show-header="false">
                    <!-- <el-table :data="tableData3" ref="myTable2" stripe style="width: 100%" border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '10px' }"
                    :cell-style="{ padding: '2px' }" :show-header="false"> -->

                    <!-- 添加一个序号列，使用type="index" -->
                    <el-table-column type="index" label="" width="70px" label-class-name="bold-header" fixed="left" />
                    <el-table-column prop="iconoreName" label="" width="150px" label-class-name="bold-header"
                        fixed="left" />
                    <!-- prop:填写数据的属性名称 -->
                    <!-- 配比，上下限 -->
                    <el-table-column prop="proportion" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.proportion"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="min" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.min"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="max" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.max"></el-input>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column prop="min" label="下限" label-class-name="bold-header" /> -->
                    <!-- <el-table-column prop="max" label="上限" label-class-name="bold-header" /> -->
                    <el-table-column prop="tfe" label="" label-class-name="bold-header" />
                    <el-table-column prop="sio2" label="" label-class-name="bold-header" />
                    <el-table-column prop="ca0" label="" label-class-name="bold-header" />
                    <el-table-column prop="mgo" label="" label-class-name="bold-header" />
                    <el-table-column prop="al2o3" label="" label-class-name="bold-header" />
                    <el-table-column prop="p" label="" label-class-name="bold-header" />
                    <el-table-column prop="s" label="" label-class-name="bold-header" />
                    <el-table-column prop="mn" label="" label-class-name="bold-header" />
                    <el-table-column prop="h2o" label="" label-class-name="bold-header" />
                    <el-table-column prop="burn" label="" label-class-name="bold-header" />
                    <el-table-column prop="price" label="" label-class-name="bold-header" />

                </el-table>

                <!-- 添加一个div元素，设置其高度为20px，背景颜色为绿色，文本居中对齐，内容为“结果” -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left;border-radius: 0px">
                    返矿信息
                </div>
                <!-- 数据表格 -->
                <el-table :data="tableData4" ref="myTable4" stripe style="width: 100%  border-radius: 0px" border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }" :show-header="false">
                    <!-- 添加一个序号列，使用type="index" -->
                    <el-table-column type="index" label="" width="70px" label-class-name="bold-header" fixed="left" />
                    <el-table-column prop="iconoreName" label="" width="150px" label-class-name="bold-header"
                        fixed="left" />
                    <!-- prop:填写数据的属性名称 -->
                    <!-- 配比，上下限 -->
                    <el-table-column prop="proportion" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.proportion"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="min" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.min"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="max" label="" label-class-name="bold-header">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.max"></el-input>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column prop="min" label="下限" label-class-name="bold-header" /> -->
                    <!-- <el-table-column prop="max" label="上限" label-class-name="bold-header" /> -->
                    <el-table-column prop="tfe" label="" label-class-name="bold-header" />
                    <el-table-column prop="sio2" label="" label-class-name="bold-header" />
                    <el-table-column prop="ca0" label="" label-class-name="bold-header" />
                    <el-table-column prop="mgo" label="" label-class-name="bold-header" />
                    <el-table-column prop="al2o3" label="" label-class-name="bold-header" />
                    <el-table-column prop="p" label="" label-class-name="bold-header" />
                    <el-table-column prop="s" label="" label-class-name="bold-header" />
                    <el-table-column prop="mn" label="" label-class-name="bold-header" />
                    <el-table-column prop="h2o" label="" label-class-name="bold-header" />
                    <el-table-column prop="burn" label="" label-class-name="bold-header" />
                    <el-table-column prop="price" label="" label-class-name="bold-header" />

                </el-table>

                <div style="height: 30px; background-color:transparent"></div>

                <div class="bottom-button">
                    <el-row :gutter="5">
                        <el-col :span="12">
                            <!-- 计算按钮 -->
                            <div class="count">
                                <el-button size="big" type="danger" @click="count()"
                                    icon="el-icon-s-promotion">计算</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </div>

            </el-tab-pane>
            <el-tab-pane label="约束设置" name="second">
                <!-- 添加一个div元素，设置其高度为20px，背景颜色为绿色，文本居中对齐，内容为“结果” -->
                <!-- <div style="height: 20px; background-color: #81a8a3; text-align: left;border-radius: 0px">
                    约束信息
                </div> -->

                <!-- 约束表格 -->
                <el-table :data="constrainttableData" ref="constraintTable" stripe style="width: 100%; border-radius: 0px"
                    border :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }">
                    <!-- 添加一个序号列，使用type="index" -->
                    <el-table-column type="index" label="序号" width="70px" label-class-name="bold-header" />
                    <el-table-column prop="constraintName" label="约束名称" label-class-name="bold-header" />
                    <el-table-column prop="min" label="上限" label-class-name="bold-header" />
                    <el-table-column prop="max" label="下限" label-class-name="bold-header" />
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="结果信息" name="third">
                <!-- 添加一个div元素，设置其高度为15px -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left; border-radius: 2px">
                    烧结原料及其配比
                </div>
                <!-- 烧结矿表格 -->
                <el-table :data="materialData" ref="materialTable" stripe style="width: 100%; border-radius: 10px" border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }">
                    <el-table-column prop="iconoreName" label="原料名称" label-class-name="bold-header" />
                    <el-table-column prop="unit" label="单位" label-class-name="bold-header" />
                    <el-table-column prop="manualProportion" label="基线配比" label-class-name="bold-header" />
                    <el-table-column prop="autoProportion" label="优化配比" label-class-name="bold-header" />
                </el-table>
                <!-- 添加一个div元素，设置其高度为15px -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left; border-radius: 2px">
                    烧结矿成本
                </div>
                <!-- 烧结矿成本表格 -->
                <el-table :data="costData" ref="costTable" stripe style="width: 100%; border-radius: 10px" border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }">
                    <el-table-column prop="costName" label="名称" label-class-name="bold-header" />
                    <el-table-column prop="unit" label="单位" label-class-name="bold-header" />
                    <el-table-column prop="manualValue" label="基线值" label-class-name="bold-header" />
                    <el-table-column prop="autoValue" label="优化值" label-class-name="bold-header" />
                    <el-table-column prop="changeValue" label="变动值" label-class-name="bold-header" />
                </el-table>
                <!-- <div style="height: 40px; background-color: transparent;"></div> -->
                <!-- <div style="height: 40px; background-color: transparent;"></div> -->
                <!-- 添加一个div元素，设置其高度为15px -->
                <div style="height: 20px; background-color: #54b0a3; text-align: left; border-radius: 2px">
                    烧结矿理论成分
                </div>
                <el-table :data="lilunzhiData" ref="lilunzhiTable" stripe style="width: 100%; border-radius: 10px" border
                    :header-cell-style="{ backgroundColor: 'azure', padding: '2px' }" :row-style="{ height: '0' }"
                    :cell-style="{ padding: '2px' }">
                    <el-table-column prop="lilunzhiName" label="名称" label-class-name="bold-header" />
                    <el-table-column prop="unit" label="单位" label-class-name="bold-header" />
                    <el-table-column prop="manualValue" label="基线值" label-class-name="bold-header" />
                    <el-table-column prop="autoValue" label="优化值" label-class-name="bold-header" />
                    <el-table-column prop="changeValue" label="变动值" label-class-name="bold-header" />
                    <el-table-column prop="is_constaint" label="是否满足约束" label-class-name="bold-header" />
                </el-table>

                <!-- <div class="graph">
                    <el-card style="height: 260px;">
                        <div style="height: 240px;" ref="userEcharts"></div>
                    </el-card>
                    <el-card style="height: 260px">
                        <div style="height: 240px" ref="videoEcharts"></div>
                    </el-card>
                </div> -->
                <!-- 使用一个div作为容器，给它一个class属性，用来设置样式 -->
                <div class="container">
                    <!-- 将两个表格放在容器内，给它们一个class属性，用来设置样式 -->
                    <div class="graph">
                        <el-card style="height: 400px; width: 600px;">
                            <div style="height: 350px; width: 550px; font-style: italic;" ref="userEcharts">烧结矿理论成分</div>
                        </el-card>
                    </div>
                    <!-- <div style="width: 600px;"></div> -->
                    <div class="graph">
                        <el-card style="height: 400px;width: 600px;">
                            <div style="height: 350px; width: 550px; font-style: italic;" ref="videoEcharts">烧结矿配比</div>
                        </el-card>
                    </div>
                </div>


            </el-tab-pane>

        </el-tabs>

    </el-main>
</template>

<script>
//导入department脚本文件
import departmentApi from "@/api/department";
import iconoreApi from "@/api/iconore";
import orebleedApi from "@/api/orebleeding";
import fluxApi from "@/api/flux";
import fuelApi from "@/api/fuel";
import returnoreApi from "@/api/returnore";
import constraintApi from "@/api/constraint";
//导入对话框组件
import SystemDialog from "@/components/system/SystemDialog1.vue";
import iconore from '@/api/iconore';
import data from '@/views/pdf/content';
import * as echarts from "echarts";


export default {
    name: "iconore",
    components: {
        SystemDialog,
    },
    data() {
        return {
            activeName: "first", // 定义变量
            downloadLoading: false,//导出时按钮
            searchModel: {
                iconoreName: "", //铁矿石名称
            },
            tableData: [],//表格数据
            tableData2: [],
            tableData3: [],
            tableData4: [],
            constrainttableData: [],//约束表格数据
            tableDataCopy: [],//存储原料表格数据
            constrainttableDataCopy: [],//存储约束表格数据
            oreNames: [], // 声明一个空数组，用来存储tableDataCopy中的原料名称
            page: 1,
            size: 5,
            total: 1,
            deptDialog: {
                title: "",
                visible: false,
                width: 380,
                height: 500,
            },
            orebleed: {
                //对应到数据库里面的属性
                id: "",
                iconoreName: "",
                tfe: "",
                sio2: "",
                ca0: "",
                mgo: "",
                al2o3: "",
                p: "",
                s: "",
                mn: "",
                h2o: "",
                burn: "",
                max: "",
                min: "",
                proportion: "",
                price: ""
            },
            constraint: {
                id: "",
                constraintName: "",
                min: "",
                max: "",
                isSelected: ""
            },
            resData: [],
            resData2: [],
            costData: [
                { costName: "烧结矿成本", key: "cost", unit: "元/吨", manualValue: null, autoValue: null },
                // { costName: "混匀矿成本", unit: "元/吨" },
                // { costName: "厂内矿成本", unit: "元/吨" },
                // { costName: "燃料成本", unit: "元/吨" },
                // { costName: "熔剂成本", unit: "元/吨" },
            ],
            lilunzhiData: [
                { lilunzhiName: "烧结矿铁品位", key: "tfe", unit: "%", manualValue: null },
                { lilunzhiName: "CaO", key: "cao", unit: "%", manualValue: null },
                { lilunzhiName: "SiO2", key: "sio2", unit: "%", manualValue: null },
                { lilunzhiName: "MgO", key: "mgo", unit: "%", manualValue: null },
                { lilunzhiName: "Al2O3", key: "al2o3", unit: "%", manualValue: null },
                { lilunzhiName: "S", key: "s", unit: "%", manualValue: null },
                { lilunzhiName: "P", key: "p", unit: "%", manualValue: null },
                { lilunzhiName: "Mn", key: "mn", unit: "%", manualValue: null },
            ],
            materialData: []
        };
    },

    //初始化时调用
    created() {

        this.activeName = "first"; // 设置默认值
        this.checkSelectedOre();
        console.log("执行结束！")

    },
    beforeDestroy() {
        // 把 this.tableDataCopy 的数据保存到 localStorage 或 sessionStorage 里面
        localStorage.setItem('tableDataCopy', JSON.stringify(this.tableDataCopy));
        localStorage.setItem('constrainttableDataCopy', JSON.stringify(this.constrainttableDataCopy));
        // 或者
        //   sessionStorage.setItem('tableDataCopy', JSON.stringify(this.tableDataCopy));
    },



    methods: {

        iRowStyle: function ({ row, rowIndex }) {
            return 'height:10px';
        },
        iHeaderRowStyle: function ({ row, rowIndex }) {
            return 'height:10px';
        },
        iCellStyle: function ({ row, column, rowIndex, columnIndex }) {
            return 'padding:0px'
        },
        iHeaderCellStyle: function ({ row, column, rowIndex, columnIndex }) {
            return 'padding:0px'
        },

        async queryDatabase(params) {
            console.log(params.data.name);
            let iconoreName = params.data.name;
            let fuelName = params.data.name;
            let fluxName = params.data.name;
            let returnoreName = params.data.name;
            let a = params.data.name;
            var info = null;
            var obj1 = {
                iconoreName: iconoreName,
            };
            var obj2 = {
                fuelName: fuelName,
            };
            var obj3 = {
                fluxName: fluxName,
            };
            var obj4 = {
                returnoreName: returnoreName,
            };
            //根据名称查询
            await iconoreApi.findIconoreList(obj1).then((res) => {
                console.log("res:", res)
                let data = res.data;
                console.log("length:", data.length);
                if (data.length != 0) {
                    info = res.data;
                }
            })

            await fluxApi.findFluxList(obj3).then((res) => {
                console.log("res1:", res)
                let data = res.data;
                console.log("length:", data.length);
                if (data.length != 0) {
                    info = res.data;
                }
            })
            await fuelApi.findFuelList(obj2).then((res) => {
                console.log("res2:", res)
                let data = res.data;
                console.log("length:", data.length);
                if (data.length != 0) {
                    info = res.data;
                }
            })
            await returnoreApi.findReturnoreList(obj4).then((res) => {
                console.log("res3:", res)
                let data = res.data;
                console.log("length:", data.length);
                if (data.length != 0) {
                    info = res.data;
                }
            })
            // return Promise.all([
            //     iconoreApi.findIconoreList(obj1),
            //     fluxApi.findFluxList(obj3),
            //     fuelApi.findFuelList(obj2),
            //     returnoreApi.findReturnoreList(obj4)
            // ]).then((results) => {
            //     info = results.data; console.log(info);
            //     // 返回一个字符串，作为小框的内容，你可以自己调整格式
            //     return info;
            // });
            return info;
        },

        // 饼图
        bingtu(data) {
            const videoOption = {
                title: { // 添加一个标题
                    text: '优化配矿配比', // 标题的内容
                    left: 'center', // 标题的位置
                    bottom: 5, // 标题距离底部的距离
                    textStyle: { // 标题的样式
                        color: '#333', // 标题的颜色
                        fontSize: 18 // 标题的字号
                    }
                },
                tooltip: {
                    trigger: "item",
                    // 添加一个formatter属性，它是一个函数
                    formatter: function (params) {
                        // params是一个对象，包含了数据项的名称，值，百分比等信息
                        // 你可以根据params.name来查询数据库，得到对应的信息
                        // 这里假设你已经定义了一个queryDatabase函数，它接受一个名称，返回一个字符串
                        // 你可以自己实现这个函数的逻辑，或者调用其他的API
                        var info = null;
                        info = this.queryDatabase(params);
                        // info = params.key;
                        return info;
                    }
                },
                color: [
                    "#0f78f4",
                    "#dd536b",
                    "#ffff00",
                    "#9462e5",
                    "#ff00ff",
                    "#a6a6a6",
                    "#7fffd4",
                    "#e1bb22",
                    "#39c362",
                    "#3ed1cf",
                    "#800000",
                    "#394509",
                    "#f4a261",
                    "#90ee90",
                    "#394545",
                ],
                series: [
                    {
                        data: data,
                        type: 'pie'
                    }
                ],
            };
            setTimeout(() => {
                const e = echarts.init(this.$refs.videoEcharts)
                e.setOption(videoOption)
            }, 1000); // 延迟1秒
        },


        // 柱状图
        zhuzhuangtu(data, data3) {
            const userOption = {
                title: { // 添加一个标题
                    text: '烧结矿理论成分', // 标题的内容
                    left: 'center', // 标题的位置
                    bottom: 10, // 标题距离底部的距离
                    textStyle: { // 标题的样式
                        color: '#333', // 标题的颜色
                        fontSize: 18 // 标题的字号
                    }
                },
                legend: {
                    // 图例文字颜色
                    textStyle: {
                        color: "#333",
                    },
                },
                grid: {
                    left: "20%",
                },
                // 提示框
                tooltip: {
                    trigger: "axis",
                },
                xAxis: {
                    type: "category", // 类目轴
                    data: data.map((item) => item[0]),
                    axisLine: {
                        lineStyle: {
                            color: "#17b3a3",
                        },
                    },
                    axisLabel: {
                        interval: 0,
                        color: "#333",
                    },
                },
                yAxis: [
                    {
                        type: "value",
                        axisLine: {
                            lineStyle: {
                                color: "#17b3a3",
                            },
                        },
                    },
                ],
                color: ["#2ec7c9", "#b6a2de"],
                series: [
                    {
                        name: "mannal",
                        data: data3.map((item) => item[1]),
                        type: "bar",
                    },
                    {
                        name: "auto",
                        data: data.map((item) => item[1]),
                        type: "bar",
                    },


                ],
            };
            // window.onload = () => {
            //     console.log("初始化开始");
            //     const e = echarts.init(this.$refs.userEcharts);
            //     console.log("初始化结束");
            //     e.setOption(userOption);
            // };
            setTimeout(() => {
                const e = echarts.init(this.$refs.userEcharts);
                e.setOption(userOption);
            }, 1000); // 延迟1秒


        },



        /**
         * 查询被选择铁矿石
         */
        async checkSelectedOre() {
            let res = await iconoreApi.listIsSelected();
            console.log(res);
            for (let item of res.data) {
                this.tableData.push(item);
            }
            res = null;
            res = await fuelApi.listIsSelected();
            console.log(res)
            for (let item of res.data) {
                item.iconoreName = item.fuelName;
                item.ca0 = item.cao;
                delete item.fuelName;
                delete item.cao;
                this.tableData2.push(item);
            }
            res = null;
            res = await fluxApi.listIsSelected();
            console.log(res)
            for (let item of res.data) {
                item.iconoreName = item.fluxName;
                item.ca0 = item.cao;
                delete item.fluxName;
                delete item.cao;
                this.tableData3.push(item);
            }
            res = null;
            res = await returnoreApi.listIsSelected();
            console.log(res)
            for (let item of res.data) {
                item.iconoreName = item.returnoreName;
                item.ca0 = item.cao;
                delete item.returnoreName;
                delete item.cao;
                this.tableData4.push(item);
            }
            res = null;
            res = await constraintApi.listIsSelected();
            console.log(res)
            for (let item of res.data) {
                // item.iconoreName = item.returnoreName;
                // item.ca0 = item.cao;
                this.constrainttableData.push(item);
            }


            // return res;
        },

        /**
         * 检查配比之和是否为100
         */
        checkSum(tableData) {
            console.log("进入checkSum方法");
            // 将所有行的配比转换为数字类型
            // let sum = 0.0;
            tableData.forEach((row) => {
                row.proportion = Number(row.proportion);
                // sum += row.proportion;
            });
            // console.log(sum);
            // 计算所有行的配比之和
            let sum = 0.0;
            sum = tableData.reduce(
                (acc, cur) => acc + cur.proportion,
                0
            );
            console.log("sum", sum);
            // 如果和不等于100，弹出提示
            if (sum !== 100) {
                this.$message({
                    message: "所有列输入框输入的数字相加之和必须是100",
                    type: "warning",
                });
                return false;
            }
            return true;
        },

        /**
         * 清空按钮
         */
        cleanData() {
            // 使用 localStorage.removeItem 方法，把 tableDataCopy 这个键对应的值删除
            localStorage.removeItem('tableDataCopy');
            localStorage.removeItem('constrainttableDataCopy');
            // this.created();
            this.tableData = [];
            this.constrainttableData = [];
            this.output = "";
        },

        /**
         * 点击计算之后获取表格实例
         */
        async count() {
            //获取原料表格实例的数据
            // var tableData = this.$refs.myTable.data;
            var tableData = [];
            tableData = tableData.concat(this.$refs.myTable1.data, this.$refs.myTable2.data, this.$refs.myTable3.data, this.$refs.myTable4.data);
            console.log("this.tableData:", this.tableData)
            console.log("tableData:", tableData)
            var constrainttableData = this.$refs.constraintTable.data;
            console.log("constrainttableData", constrainttableData)
            //将tableData赋值给orebleed
            this.orebleed = tableData;
            console.log("orebleed:", this.orebleed);
            //将constrainttableData赋值给constraint
            this.constraint = constrainttableData;
            console.log("constraint", this.constraint);

            //判断配比之和是否为100
            if (this.checkSum(tableData)) {
                console.log("checkSum=true");
                let res = "";
                this.orebleed = tableData;
                let orebleedStr = JSON.stringify(this.orebleed); // 将对象转换为JSON字符串
                console.log(orebleedStr);
                this.constraint = this.constrainttableData;
                let constraintStr = JSON.stringify(this.constraint); // 将对象转换为JSON字符串
                console.log(constraintStr)
                let map = { orebleed: orebleedStr, constraint: constraintStr }; // 将两个字符串放入一个对象中
                await orebleedApi
                    .orebleed(map)
                    .then((res) => {
                        console.log(res);
                        if (res.success) {
                            // this.output = res.data.cost;
                            this.resData = res.data;
                            console.log("成功！");
                        }
                    })
                    .catch((err => {
                        throw new Error("请求失败");
                    }));
                await orebleedApi
                    .autoOrebleed(map)
                    .then((res) => {
                        if (res.data == null) {
                            this.$message({
                                message: "所选约束没有找到最优解,请修改约束条件！",
                                type: "warning",
                            });
                        } else {
                            console.log("res:", res);
                            this.resData2 = res.data;
                            // console.log("this.zhuzhuangtu(res.data);");
                            console.log("res.data.theory:", res.data.theory);
                            const data = Object.entries(res.data.theory)
                            const data3 = Object.entries(this.resData);
                            const newData3 = data3.filter((item) => item[0] !== "h2o");
                            const newData4 = newData3.filter((item) => item[0] !== "cost");
                            console.log("newData:", newData4);
                            this.zhuzhuangtu(data, newData4);
                            console.log("调用结束");
                            //给lilunzhiData赋值
                            this.lilunzhiData.forEach(item => { // 遍历lilunzhiData数组
                                console.log("进入方法");
                                console.log("this.resData:", this.resData);
                                // console.log(this.resData["tfe"]);
                                let resDataCopy = this.resData;
                                let theory = this.resData2.theory
                                // this.zhuzhuangtu(theory);
                                let key = item.key;
                                if (this.resData.hasOwnProperty(key)) {
                                    // console.log("进入if方法");
                                    item.manualValue = resDataCopy[key]; // 手动计算的值赋值给manualValue属性
                                    item.autoValue = theory[key]; // 自动计算的值赋值给autoValue 
                                    item.changeValue = (item.autoValue - item.manualValue).toFixed(2); //计算变动值
                                    item.is_constaint = "ok";
                                }
                            });

                            //costData表格赋值
                            this.costData.forEach(item => {
                                let key = item.key;
                                let resDataCopy = this.resData;
                                let cost = this.resData2.result.cost;
                                if (this.resData.hasOwnProperty(key)) {
                                    // console.log("进入if方法");
                                    item.manualValue = resDataCopy[key]; // 手动计算的值赋值给manualValue属性
                                    item.autoValue = Math.round(cost * 100) / 100;
                                    item.changeValue = (item.autoValue - item.manualValue).toFixed(2);
                                }
                            });

                            //给materialData表格赋值
                            let orebleedCopy = this.orebleed;
                            let resData2Copy = this.resData2;

                            for (let item of orebleedCopy) {
                                item.manualProportion = item.proportion;
                                this.materialData.push(item);
                            }
                            let num = 0;
                            // console.log("orebleedCopy:", orebleedCopy);
                            // console.log(orebleedCopy.result.ratio[0]);

                            let Listiconore = [];
                            let b = 0;
                            let ratio = resData2Copy.result.ratio;
                            // console.log("resData2Copy.result.ratio:", resData2Copy.result.ratio);
                            this.materialData.forEach(item => {
                                // console.log("item:", item);

                                let a = item.iconoreName;
                                console.log(a);
                                Listiconore[b] = a;
                                b = b + 1;

                            });
                            console.log(Listiconore);

                            //创建一个map存储优化原料名和优化配比
                            const map = new Map();
                            console.log("map1");
                            for (let i = 0; i < Listiconore.length; i++) {
                                console.log("map");
                                let key = Listiconore[i];
                                let value = ratio[i];
                                map.set(key, value);
                            }
                            // console.log("jieshu");
                            console.log(map);
                            const map1 = Object.entries(map);
                            // 将map转换成数组
                            const data1 = Array.from(map, ([name, value]) => ({ name, value }));
                            this.bingtu(data1);
                            console.log("饼图绘制完毕");


                            this.materialData.forEach(item => {
                                console.log("进入material");
                                item.autoProportion = resData2Copy.result.ratio[num];
                                num = num + 1;
                                item.autoProportion = item.autoProportion.toFixed(2);
                                item.unit = "%";
                            })

                            console.log("1");
                            this.goTothird();

                            // this.$router.replace({ path: '/resultview', query: { resData: JSON.stringify(this.resData), resData2: JSON.stringify(this.resData2), orebleed: JSON.stringify(this.orebleed) } });
                        }
                    }).catch((err) => {
                        throw new Error("请求失败");
                    })

            } else {
                console.log("checkSum=false");
                this.$message({
                    message: "请检查配比之和是否为100!",
                    type: "warning",
                })
            }
            // this.$router.replace({ path: '/resultview', query: { resData: JSON.stringify(this.resData) } });
        },

        /**
         * 跳转第三个页面
         */
        goTothird() {
            this.activeName = "third";
        },

        /**
         * 导出excel数据
         */
        handleDownload() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = ['原料名称', 'TFe', 'SiO2', 'CaO', 'MgO', 'Al2O3', 'P', 'S', 'Mn', 'H2O', 'Burn']
                const filterVal = ['iconoreName', 'tfe', 'sio2', 'ca0', 'mgo', 'al2o3', 'p', 's', 'mn', 'h2o', 'burn']
                const list = this.tableData
                const data = this.formatJson(filterVal, list)
                excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: '原料信息.xlsx',
                    autoWidth: this.autoWidth,
                    bookType: 'xlsx'
                })
                this.downloadLoading = false
            })
        },
        formatJson(filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => {
                if (j === 'timestamp') {
                    return parseTime(v[j])
                } else {
                    return v[j]
                }
            }))
        },


        /**
         * 编辑部门
         */
        handleEdit(row) {
            //数据回显
            this.$objCopy(row, this.iconore);
            //设置窗口的标题
            this.deptDialog.title = "编辑铁矿石数据";
            //显示窗口
            this.deptDialog.visible = true;
        },
        /**
         * 删除原料
         */
        async handleDelete(row) {
            //确认是否删除
            let confirm = window.confirm("确认要删除该数据吗？");
            if (confirm) {
                //发送删除请求
                let res = await iconoreApi.deleteIconore({ id: row.id });
                if (res.success) {
                    //提示成功
                    this.$message.success(res.message);
                    //刷新数据
                    this.search();
                } else {
                    this.$message.error(res.message);
                }
            }

        },

        /**
         * 查询部门列表
         */
        async search() {
            //发送查询请求
            // let res = await departmentApi.getDepartmentList(this.departmentName)
            // .then获取请求成功，.catch获取请求失败，并抛出异常，停止往下执行
            await iconoreApi
                .findIconoreList(this.searchModel)
                .then((res) => {
                    //查看请求成功的数据
                    console.log(res);
                    if (res.success) {
                        // this.tableData = res.data;
                        this.total = res.data.length;
                        let start = (this.page - 1) * this.size; // 计算当前页的起始索引
                        let end = start + this.size; // 计算当前页的结束索引
                        this.tableData = res.data.slice(start, end); // 截取当前页的数据
                    }
                })
                .catch((err) => {
                    // ElMessage.error("请求失败")
                    throw new Error("请求失败");
                });

        },

        /**
         * 打开添加窗口
         */
        openAddWindow() {
            //清空表单数据,第一个参数是表单的ref值，后面一个参数是表单数据
            this.$resetForm("deptForm", this.iconore);

            this.deptDialog.title = "新增铁矿石";
            this.deptDialog.visible = true;
        },

        /**
         * 窗口的关闭事件
         */
        onClose() {
            this.deptDialog.visible = false;
        },
        /**
         * 窗口确认事件
         */
        onConfirm() {
            //进行表单验证
            this.$refs.deptForm.validate(async (valid) => {
                //如果验证通过
                if (valid) {
                    let res = null;

                    //判断当前是新增还是修改（判断条件，判断当前dept对象的id属性是否为空）
                    //为空发送新增请求，不为空发送修改请求
                    if (this.iconore.id === "") {
                        //发送添加请求
                        res = await iconoreApi.addIconore(this.iconore);
                    } else {
                        //发送修改请求
                        res = await iconoreApi.updateIconore(this.iconore);
                    }

                    if (res.success) {
                        //提示成功
                        this.$message.success(res.message);
                        //刷新数据
                        this.search();
                        //关闭窗口
                        this.deptDialog.visible = false;
                    } else {
                        this.$message.error(res.message);
                    }
                }
            });
        },

        /**
         * 页面大小改变时分页器操作
         */
        handleSizeChange(val) {
            this.size = val;
            this.search();
        },
        /**
         * 当前页码改变时分页器操作
         */
        handleCurrentChange(val) {
            this.page = val;
            this.search();
        },
    },
};
</script>

<style>
/*给bottom-button类添加样式，使其固定在页面底部中央*/
.bottom-button {
    /*使用绝对定位*/
    position: fixed;
    /*设置底部距离为0*/
    bottom: 0;
    margin: auto;
    /*设置左右距离为50%，再减去自身宽度的一半，使其居中*/
    left: 50%;
    transform: translateX(-50%);
}


.bold-header {
    font-weight: bold;
    color: black;
    /* background-color: azure; */
}

/* 设置容器的样式 */
.container {
    /* 使用flex布局，让子元素水平排列 */
    display: flex;
    /* 设置容器的宽度，可以根据需要调整 */
    width: 1200px;
    /* 设置容器的边距，可以根据需要调整 */
    margin: 20px auto;
}

/* 设置表格的样式 */
.graph {
    /* 设置表格的宽度，可以根据需要调整 */
    /* width: 400px; */
    /* 设置表格的边距，可以根据需要调整 */
    margin: 10px;
}
</style>
